import React, { Component } from 'react'
import { Button, Table, Tag, Space, Card, message } from 'antd'
import Add from './Add'
import './userSystem.less'
import { getAccountList, delAccount } from '../../api/user'
export default class UserSystem extends Component {
  state = {
    data: [],
    columns: [
      {
        title: '用户名字',
        dataIndex: 'account',
        key: 'account',
      },
      {
        title: '邮箱地址',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: '角色',
        dataIndex: ['role', 'name'],
      },
      {
        title: '操作',
        key: 'action',
        width: '15%',
        render: (lcz) => (
          <Button type="danger" onClick={() => this.delete(lcz._id)}>
            删除
          </Button>
        ),
      },
    ],
  }

  render() {
    let { columns, data } = this.state
    return (
      <>
        <Card
          title={<Add add={this.getAccountList} />}
          bordered={false}
          style={{ width: '100%' }}
        >
          <Table
            rowKey="_id"
            scroll={{ y: '370px' }}
            columns={columns}
            dataSource={data}
          />
        </Card>
      </>
    )
  }
  componentDidMount() {
    this.getAccountList()
  }
  // 获取列表
  getAccountList = () => {
    getAccountList().then((lcz) => {
      this.setState({ data: lcz.data.data })
      // console.log(lcz.data.data)
    })
  }
  // 删除
  delete = (id) => {
    delAccount({ id }).then((lcz) => {
      // console.log(lcz.data)
      message.success('删除成功')
    })
    this.getAccountList()
    // console.log(id)
  }
}
